<template>
  <div>
    <div class="subject" v-for="(item, index) in dataArr" :key="index">
      <span>{{ item.a }}</span>
      <span>+</span>
      <span>{{ item.b }}</span>
      <span>=</span>
      <input type="number" v-model.number="tijiao[index]" />
      <button @click="panduan(index)">提交</button>
    </div>
    <div>
      <FlagItem :tijiao="tijiao"> </FlagItem>
    </div>
  </div>
</template>

<script>
import FlagItem from '@/components/FlagItem.vue'
export default {
  props: ['dataArr'],
  data () {
    return {
      tijiao: []
    }
  },
  methods: {
    panduan (id) {
      console.log(this.tijiao)
      if (this.tijiao[id] === undefined) {
        this.tijiao[id] = '未完成'
      } else {
        const sum = this.dataArr[id].a + this.dataArr[id].b
        if (this.tijiao[id] === sum) {
          this.tijiao[id] = '计算正确'
        } else if (this.tijiao[id] !== sum) {
          this.tijiao[id] = '计算失误'
        }
      }
    }
  },
  computed: {},
  components: {
    FlagItem
  }
}
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>
